<!DOCTYPE html>
<html lang="zh-CN" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <script type="text/javascript">

        var remoteUrl = '[[@{/sys/role/checkName}]]';

        $(document).ready(function () {
            $("#name").focus();
            var validateMessageBox = $('#validateMessageBox');
            var roleEditForm = $('#roleEditForm');
            roleEditForm.validate({
                errorElement: 'label',
                errorClass: 'help-block',
                focusInvalid: true,
                rules: {
                },
                messages: {
                },
                highlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                },
                success: function (label, element) {
                    label.closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    var zMenuTree = $.fn.zTree.getZTreeObj("menuTree");
                    var ids = [], nodes = zMenuTree.getCheckedNodes(true);
                    for (var i = 0; i < nodes.length; i++) {
                        ids.push(nodes[i].id);
                    }
                    $("#menuIds").val(ids);

                    App.blockUI(window, true);
                    form.submit();
                },
                errorContainer: validateMessageBox,
                errorPlacement: function (error, element) {
                    this.errorContainer.addClass('note-danger').html("<p>输入有误，请先更正。</p>").show();
                    var formGroup = $(element).closest('.form-group');
                    var errorElement = formGroup.children('span.' + this.errorClass);
                    if (!errorElement || errorElement.length == 0) {
                        errorElement = $('<span/>').addClass(this.errorClass);
                        errorElement.appendTo(formGroup);
                    }
                    error.appendTo(errorElement);
                }
            });


        });
        function goBack(){
        	location.href="[[@{/sys/role}]]";
        }
    </script>
</head>
<body shiro:has-permission="sys:role:view">
<div layout:fragment="content" th:remove="tag">
    <div th:replace="fragments/tool :: tipMessage (type='',content=${message})" th:remove="tag"></div>

    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <ul class="page-breadcrumb breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a th:href="@{/}">首页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">权限管理</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li><a th:href="@{/sys/role}">角色管理</a></li>
            </ul>
            <!-- END PAGE TITLE & BREADCRUMB-->

        </div>
    </div>


    <div class="row">
    	<div class="col-md-1"></div>
        <div class="col-md-10">
            <!--BEGIN TABS-->
            <div class="tabbable tabbable-custom tabbable-full-width" >
                <div class="tab-content" style="border:none;">
                    <div class="tab-pane active" id="role_tab_1_2">
                        <div class="portlet box blue">
                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <form id="roleEditForm" class="form-horizontal" th:object="${role}"
                                      th:action="@{/sys/role/save}" method="post">
                                    <input type="hidden" th:field="*{id}" class="role-id"/>

                                    <div class="form-body" style="background-color: #fff;">
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">归属机构<span
                                                    class="required">*</span></label>

                                            <div class="col-md-6">
                                            	<th:block th:if="${not #strings.isEmpty(role.id)}">
                                            		<input th:field="*{office.name}" class="form-control" th:readonly="true" type="text"/>
                                            		<input th:field="*{office.id}" class="office-id" th:readonly="true" type="hidden"/>
                                            	</th:block>
                                            	<th:block th:if="${#strings.isEmpty(role.id)}">
	                                                <div th:replace="fragments/tool :: treeSelect (id='office',name='office.id', labelName='office.name', nameVal=${role.office.id}, labelVal=${role.office.name}, cssClass='required', placeholder='', dialogTitle='选择机构', remoteUrl='/sys/office/treeData?type=1', always=true)"></div>
                                            	</th:block>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">角色名称<span
                                                    class="required">*</span></label>

                                            <div class="col-md-6">
                                                <input type="text" th:field="*{name}" maxlength="20" 
                                                       class="form-control required role-name" th:readonly="${not #strings.isEmpty(role.name) and not  #strings.isEmpty(role.id)}"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">数据范围<span
                                                    class="required">*</span></label>

                                            <div class="col-md-6">
                                                <select th:field="*{dataScope}" class="form-control" >
                                                    <option th:each="item,stat : ${@userMenus.getDictList('sys_data_scope')}"
                                                            th:value="${item.value}" th:text="${item.label}"
                                                            th:if="${#strings.equalsIgnoreCase(item.value, role.dataScope)}"
                                                            selected>label
                                                    </option>
                                                    <option th:each="item,stat : ${@userMenus.getDictList('sys_data_scope')}"
                                                            th:value="${item.value}" th:text="${item.label}"
                                                            th:unless="${#strings.equalsIgnoreCase(item.value, role.dataScope)}">
                                                        label
                                                    </option>
                                                </select>
<!--                                                 <span class="help-inline">特殊情况下，设置为“自定义”，可进行跨机构授权</span> -->
                                            </div>
                                        </div>
                                         <div class="form-group last">
                                            <label class="col-md-3 control-label">描述</label>
                                            <div class="col-md-6">
                                                <textarea class="form-control" th:field="*{remarks}" rows="3" maxlength="100" ></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group last">
                                            <label class="col-md-3 control-label">角色授权</label>

                                            <div class="col-md-8">
                                                <div id="menuTree" class="ztree col-md-4"
                                                     style="margin-top:3px;float:left;"></div>
                                                <input type="hidden" th:name="menuIds" th:id="menuIds">
                                            </div>

                                            <th:block th:if="${not #strings.isEmpty(role.id)}">
                                                <link th:href="@{/assets/plugins/jquery-ztree/3.5.24/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" type="text/css"/>
                                                <script type="text/javascript" th:src="@{/assets/plugins/jquery-ztree/3.5.24/js/jquery.ztree.all.min.js}"></script>
                                            </th:block>
                                            <script>
                                                var roleSetting = {
                                                    check: {
                                                        enable: true
                                                    },
                                                    data: {
                                                        simpleData: {
                                                            enable: true
                                                        }
                                                    },
                                                    callback: {
                                                        beforeClick: doBeforeClick
                                                    }
                                                };

                                                function doBeforeClick(treeId, treeNode, clickFlag) {
                                                    var zTree = $.fn.zTree.getZTreeObj("menuTree");
                                                    zTree.checkNode(treeNode, !treeNode.checked, true, true);
                                                    return false;
                                                }

                                                $.get("[[@{/sys/role/allMenus}]]", function(data){
                                                    var initAllMenus = function (zNodes) {

                                                        // 初始化树结构
                                                        var menuTree2 = $.fn.zTree.init($("#menuTree"), roleSetting, zNodes);
                                                        // 默认选择节点
                                                        var ids = "[[${role.menuIds}]]".split(",");
                                                        for (var i = 0; i < ids.length; i++) {
                                                            var node = menuTree2.getNodeByParam("id", ids[i]);
                                                            try {
                                                                menuTree2.checkNode(node, true, false);
                                                            } catch (e) {
                                                            }
                                                        }
                                                        // 默认展开全部节点
                                                        menuTree2.expandAll(true);
                                                    }(data);
                                                });
                                            </script>
                                        </div>

                                    </div>
                                    <div class="form-actions fluid">
                                        <div class="col-md-offset-3 col-md-6" style="text-align: right;">
                                            <button type="submit" class="btn blue" shiro:has-any-permissions="sys:role:add,sys:role:edit">保 存</button>
                                            <button type="button" class="btn default" onclick="goBack()">返 回
                                            </button>
                                        </div>
                                    </div>
                                </form>
                                <!-- END FORM-->
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

</body>
</html>
